<template>
    <div>
        <div class="ant-row ant-form-item" v-for="(item, index) in list" :key="index">
            <div class="ant-form-item-label">
                <label class="ant-form-item-required">{{item.title}}</label>
            </div>
            <el-input v-if="item.type == 'text' " min="0" :type="item.intertype" v-model="model[item.model]" :placeholder="'请输入'+item.title"></el-input>
            <!-- <div v-if='item.intertype == number'>
                dsadsa
                <el-input 
            v-if="item.type == 'text' && item.intertype == number" 
            min="0" 
            type="number" 
            v-model="model[item.model]" 
            :placeholder="'请输入'+item.title"
            ></el-input> -->
            <!-- </div> -->
            
            <el-input v-if="item.type == 'secondtext'" :type="item.intertype" v-model="model[item.model][item.model2]" :placeholder="'请输入'+item.title"></el-input>
            <div v-if="item.type == 'radioGender'">
                <el-radio v-model="model[item.model]" label="男">男</el-radio>
                <el-radio v-model="model[item.model]" label="女">女</el-radio>
            </div>
            <div v-if="item.type == 'state'">
                <div v-for="(item2,index2) in item.data" :key="index2">
                    <template v-if="item['disabled']">
                        <div v-if="model[item.model] == item2.value">{{item2.label}}</div>
                    </template>
                    
                </div>
                <template v-if="!item['disabled']">
                    <el-select v-model="model[item.model]" :placeholder="'请选择'+item.title">
                        <el-option
                        v-for="item2 in item.data"
                        :key="item2.value"
                        :label="item2.label"
                        :value="item2.value">
                        </el-option>
                    </el-select>
                </template>
            </div>

            <template v-if="item.type == 'checkbox-group'">
                <el-checkbox-group v-model="model[item.model]">
                    <el-checkbox v-for="(item, index) in item.data" :key="index" :label="item.label"></el-checkbox>
                </el-checkbox-group>
            </template>

            <template v-if="item.type == 'radio'">
                <el-radio v-for="(item2, index) in item.data" 
                v-model="model[item.model]" 
                :key="index" 
                :label="item2.value">{{item2.label}}</el-radio>
            </template>

            <template v-if="item.type == 'editor'">
                <editor v-model="model[item.model]"></editor>
            </template>

        </div>
    </div>
</template>

<script>

export default {
    props: ['list','model'],
    watch: {
        list: {
            handler: function (val) {
                this.list = val;
            },
            deep: true
        },
        model: {
            handler: function (val) {
                this.model = val;
            },
            deep: true
        },
    },
    mounted(){
        console.log(this.model)
    },
    methods:{
      aaa(){
          console.log(this.model)
      }
    }
}
</script>

<style lang="less">

.ant-row {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
    box-sizing: border-box;
    }
    

    .ant-form-item {
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    color: rgba(0,0,0,.65);
    box-sizing: border-box;
    padding: 0;
    list-style: none;
    margin: 0 0 24px;
    vertical-align: top;

    .pages-account-upload {
        width: 144px;
        text-align: center;
    }
    .pages-account-settings-base-view-avatar{
        width: 144px;
        height: 144px;
        margin-bottom: 12px;
        overflow: hidden;
        img {
            width: 100%;
        }
    }

    .ant-form-item-label {
        text-align: right;
        vertical-align: middle;
        line-height: 39.9999px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }

    .ant-form-item-label {
        padding: 0 0 8px;
        margin: 0;
        display: block;
        text-align: left;
        line-height: 1.5;
    }


    .el-input__inner {
        width: 307px;
        height: 32px;
    }
    }
</style>
